<template>
  <div style="padding:10px;">
    <el-table :data="list" border size="mini">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column label="创建日期" width="150" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80">
        <template slot="header" slot-scope="scope">
          <el-button
            style="padding:3px;"
            icon="el-icon-plus"
            title="添加配置"
            circle
            @click="handleCreate"
          ></el-button>
          <el-button
            style="padding:3px;"
            icon="el-icon-mouse"
            title="初始化配置"
            circle
            @click="handleInit"
          ></el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="danger"
            class="list-mini-btn"
            icon="el-icon-error"
            title="删除"
            @click="handleDelete(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogDataVisible" title="配置数据权限" :modal="false">
      <div class="filter-container">
        <el-select
          v-model="values"
          class="filter-item"
          size="mini"
          collapse-tags
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="(item,index) in options"
            :key="parseInt(index)"
            :label="item"
            :value="parseInt(index)"
          ></el-option>
        </el-select>
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </div>
      <el-table border size="mini" :data="tableData" @selection-change="handleTableRow">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column label="创建日期" width="150" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogDataVisible=false">取消</el-button>
        <el-button type="primary" @click="SaveDataAuth">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from "@/utils";
import { getOrganizationDictionary } from "@/api/auth/organization";
import {
  getUserList,
  deleteUserData,
  initUserData,
  saveUserData
} from "@/api/auth/permission";
import { getUserPermissionData } from "@/api/auth/user";
export default {
  name: "DataCard",
  props: {
    userId: {
      type:Number
    }
  },
  data() {
    return {
      list: null,
      tableData: null,
      dialogDataVisible: false,
      options: [], //机构信息
      values: [],
      multipleSelection: []
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      getUserList(this.userId).then(response => {
        this.list = response.data;
      });
    },
    getUserPermissions() {
      getUserPermissionData({ id: this.userId, values: this.values }).then(
        response => {
          this.tableData = response.data;
        }
      );
    },
    //搜索事件
    handleFilter() {
      this.getUserPermissions();
    },
    //创建配置事件
    handleCreate() {
      this.dialogDataVisible = true;
      getOrganizationDictionary().then(response => {
        this.options = response.data;
      });
      this.getUserPermissions();
    },
    //选中触发该事件
    handleTableRow(val) {
      this.multipleSelection = [];
      for (var item in val) {
        this.multipleSelection.push(val[item].id);
      }
    },
    //保存配置事件
    SaveDataAuth() {
      if (this.multipleSelection.length == 0) {
        this.$message({ message: "未选中保存的数据", type: "error" });
      } else {
        const loading = this.$loading({ text: "正在保存数据" });
        saveUserData({ id: this.userId, values: this.multipleSelection })
          .then(response => {
            this.dialogDataVisible = false;
            loading.close();
            this.$message({
              message: response.message,
              type: response.success ? "success" : "error"
            });
            this.getUsers();
          })
          .catch(error => {
            loading.close();
            console.info(error);
          });
      }
    },
    //初始化配置事件
    handleInit() {
      this.$confirm(
        "确定初始化配置（初始化数据来源用户数据权限类型及机构）?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          const loading = this.$loading({ text: "正在初始化，请耐心等待..." });
          initUserData(this.userId)
            .then(response => {
              loading.close();
              this.$message({
                message: response.message,
                type: response.success ? "success" : "error"
              });
              this.getUsers();
            })
            .catch(() => {
              loading.close();
            });
        })
        .catch(err => {
          console.error(err);
        });
    },
    //删除配置事件
    handleDelete(id) {
      this.$confirm("确定删除配置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const loading = this.$loading({ text: "正在删除数据" });
          deleteUserData(this.userId, id)
            .then(response => {
              loading.close();
              this.$message({
                message: response.message,
                type: response.success ? "success" : "error"
              });
              this.getUsers();
            })
            .catch(() => {
              loading.close();
            });
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>
